<template>
     <el-dialog
              v-dialogDrag
              width="800px"
              title="请选择地图位置"
              :visible.sync="innerVisible"
            >
              <div id="map-container"></div>
              <span slot="footer" class="dialog-footer">
              <el-button @click="innerVisible = false">取 消</el-button>
              <el-button type="primary" @click="innerVisible = false">确 定</el-button>
            </span>
      </el-dialog>
</template>

<script>
    export default {
       data() {
           return {
               map:null,//地图
               marker:null,//标记点
           }
       }, 
       props:{
           innerVisible:{
               type:Boolean
           },
           lng:{
               type:Number
           },
           lat:{
               type:Number
           }
       },
       mounted(){
           this.initMap(this.lng,this.lat)
       },
       methods:{
        //初始化地图
            initMap(lng,lat){
                 console.log(lng,lat,"sahdjh")
                this.map = new AMap.Map('map-container', {
                        center: [lng, lat],
                        zoom: 14
                    });
            },
            //初始化标记点
            initMarker(lng,lat){
            // console.log(lng,lat)
            this.marker = new AMap.Marker({
                position: this.map.getCenter(),
                icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
                offset: new AMap.Pixel(-13, -30),
                // 设置是否可拖拽
                draggable: true,
                cursor: 'move'
            });
            this.marker.setMap(this.map);
            // 设置点标记的动画效果，此处为弹跳效果
            this.marker.setAnimation('AMAP_ANIMATION_BOUNCE');
            },
       }
    }
</script>

<style  scoped>
#map-container{
  width:100%;
  height: 500px;
}
#map-container /deep/ .amap-marker:first-child .amap-icon img {
            width: 25px;
            height: 34px;
        }
</style>